<template>
  <div ref="mychart" style="width: 100%; height: 100%"></div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    initZheJiang () {
      const myChart = this.$echarts.init(this.$refs.mychart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>总数量:{c}'
        },
        visualMap: {
          x: '40',
          y: '70',
          min: 0,
          max: 1200,
          itemGap: 20,
          textStyle: {
            fontSize: 16,
            color: 'white'
          },
          splitNumber: 6,
          // splitList: [
          //   { start: 6, end: 6, label: '>1000' },
          //   { start: 5, end: 5, label: '500-1000' },
          //   { start: 4, end: 4, label: '200-500' },
          //   { start: 3, end: 3, label: '100-200' },
          //   { start: 2, end: 2, label: '50-100' },
          //   { start: 1, end: 1, label: '<50' }
          // ],
          color: [
            'rgb(11,100,219)',
            'rgb(16,155,255)',
            'rgb(75,180,255)',
            'rgb(24,207,247)',
            'rgb(135,235,255)',
            'rgb(213,252,255)'
          ]
        },
        series: [
          {
            type: 'map',
            map: '浙江',
            label: {
              show: true
            },
            data: [
              { name: '杭州市', value: 100 },
              { name: '宁波市', value: 80 },
              { name: '湖州市', value: 80 },
              { name: '嘉兴市', value: 1200 },
              { name: '绍兴市', value: 300 },
              { name: '衢州市', value: 40 },
              { name: '金华市', value: 150 },
              { name: '舟山市', value: 30 },
              { name: '台州市', value: 600 },
              { name: '丽水市', value: 30 },
              { name: '温州市', value: 80 }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initZheJiang()
    })
  }
}
</script>
